<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>jQuery plugin: Tablesorter 2.0 - External Filters + select2</title>

	<!-- jQuery -->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>

	<!-- Demo stuff -->
	<link class="ui-theme" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/cupertino/jquery-ui.css">
	<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
	<link rel="stylesheet" href="../docs/css/jq.css">
	<link href="../docs/css/prettify.css" rel="stylesheet">
	<script src="../docs/js/prettify.js"></script>
	<script src="../docs/js/docs.js"></script>

	<link rel="stylesheet" href="select2.css">
	<script src="http://cdnjs.cloudflare.com/ajax/libs/select2/3.4.0/select2.min.js"></script>
	<style>
	.tablesorter-filter-row td button {
		background-color: red;
		color: white;
		border: #555 1px solid;
	}
	#external_controls input {
		width: 150px;
		margin-left: 5px;
	}
	.selector {
		width: 200px;
	}
	</style>

	<!-- Tablesorter: required -->
	<link rel="stylesheet" href="../css/theme.jui.css">
	<script src="../js/jquery.tablesorter.js"></script>
	<script src="../js/jquery.tablesorter.widgets.js"></script>

<script id="js">$(function(){

	var $t = $('table')
		.on('filterInit', function () {

			var filters,
			select2Column = 0,
			$t = $(this),
			$filterCells = $t.find('.tablesorter-filter-row').children(),
			$ext = $('#external_controls'),
			$extCells = $ext.find('td'),
			startSearch = function(){
				filters = [];
				$extCells.each(function(i){
					var v,
					$this = $(this),
					$item = $this.find('select, input');
					// specific method for select2
					if (i === select2Column) {
						v = '/(' + ($this.find('.selector').select2('val') || []).join('$|') + '$)/';
					}
					if (i !== select2Column) {
						// search for numbers > value
						// v = '>=' + $item.val();
					}
					filters[i] = v || $item.val() || '';
				});
				// start search
				$.tablesorter.setFilters($t, filters, true);
			};

			// hide filter row completely
			$t.find('.tablesorter-filter-row').hide();

			// clone original select and turn it into a select2
			// doing it this way because we can let the filter widget do most of the work
			$filterCells.eq(select2Column)
				.find('select')
				.attr('multiple', 'multiple')
				.addClass('selector')
				.appendTo( $ext.find('.select2') );
			// replace select with an input
			$filterCells.eq(select2Column).html('<input type="search" class="tablesorter-filter">');
			// turn off built-in filter-select
			$t.find('.filter-select').removeClass('filter-select') // turn off filter select
			this.config.widgetOptions.filter_functions[select2Column] = null;
			// removed first option (it's just a placeholder)
			$ext.find('.selector').find('option:first').remove();
			// set up select2 input
			$ext.find('.selector').select2();

			// input changes trigger a new search
			$ext.find('select, input').on('change', function () {
				startSearch();
			});

		})
		.tablesorter({
			theme: 'jui',
			headerTemplate: '{content}{icon}',
			widgets: ['zebra', 'uitheme', 'filter']
		});


	});
</script>

</head>
<body>
<div id="banner">
	<h1>table<em>sorter</em></h1>
	<h2>External Filters + select2</h2>
	<h3>Flexible client-side table sorting</h3>
	<a href="index.html">Back to documentation</a>
</div>
<div id="main">

	<p class="tip">
		<em>NOTE!</em>
		<ul>
			<li>External filter using <a href="http://ivaynberg.github.io/select2/">Select2</a> plugin.</li>
		</ul>
	</p>

	<h1>Demo</h1>
	<br>

<table id="external_controls">
	<tbody>
		<tr>
			<td class="select2">filters: </td>
			<td>
				<input type="search" placeholder="num" />
			</td>
			<td>
				<input type="search" placeholder="anim" />
			</td>
			<td>
				<input type="search" placeholder="sites" />
			</td>
		</tr>
	</tbody>
</table>
<table class="tablesorter">
	<thead>
		<tr>
			<th class="filter-select">AlphaNumeric</th>
			<th>Numeric</th>
			<th>Animals</th>
			<th>Sites</th>
		</tr>
	</thead>
	<tbody>
		<tr><td>abc 123</td><td>10</td><td>Koala</td><td>http://www.google.com</td></tr>
		<tr><td>abc 1</td><td>34</td><td>Ox</td><td>http://www.yahoo.com</td></tr>
		<tr><td>abc 9</td><td>10</td><td>Girafee</td><td>http://www.facebook.com</td></tr>
		<tr><td>zyx 24</td><td>67</td><td>Bison</td><td>http://www.whitehouse.gov/</td></tr>
		<tr><td>abc 11</td><td>3</td><td>Chimp</td><td>http://www.ucla.edu/</td></tr>
		<tr><td>abc 2</td><td>56</td><td>Elephant</td><td>http://www.wikipedia.org/</td></tr>
		<tr><td>abc 9</td><td>75</td><td>Lion</td><td>http://www.nytimes.com/</td></tr>
		<tr><td>abc 10</td><td>87</td><td>Zebra</td><td>http://www.google.com</td></tr>
		<tr><td>zyx 1</td><td>99</td><td>Koala</td><td>http://www.mit.edu/</td></tr>
		<tr><td>zyx 12</td><td>0</td><td>Llama</td><td>http://www.nasa.gov/</td></tr>
	</tbody>
</table>

	<h1>HTML</h1>
	<div>
		<pre class="prettyprint lang-html">&lt;table id=&quot;external_controls&quot;&gt;
	&lt;tbody&gt;
		&lt;tr&gt;
			&lt;td class=&quot;select2&quot;&gt;filters: &lt;/td&gt;
			&lt;td&gt;
				&lt;input type=&quot;search&quot; placeholder=&quot;num&quot; /&gt;
			&lt;/td&gt;
			&lt;td&gt;
				&lt;input type=&quot;search&quot; placeholder=&quot;anim&quot; /&gt;
			&lt;/td&gt;
			&lt;td&gt;
				&lt;input type=&quot;search&quot; placeholder=&quot;sites&quot; /&gt;
			&lt;/td&gt;
		&lt;/tr&gt;
	&lt;/tbody&gt;
&lt;/table&gt;</pre>
	</div>

	<h1>Javascript</h1>
	<div id="javascript">
		<pre class="prettyprint lang-javascript"></pre>
	</div>

</div>

</body>
</html>

